<template>
  <div class="child">
    <h2>子组件</h2>
    <p>子组件接收到的消息: {{ parentMessage }}</p>
    <button @click="sendDataToParent">发送数据到父组件</button>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

// 定义父组件传递的 props
const props = defineProps({
  parentMessage: {
    type: String,
    required: true,
  },
});

// 定义子组件发送事件的 emit
const emit = defineEmits(['child-event']);

// 子组件发送数据到父组件
const sendDataToParent = () => {
  const data = 'Hello from 子组件发送数据!';
  emit('child-event', data);
  // emit('child-event');
};
</script>

<style scoped>
.child {
  border: 1px solid #999;
  padding: 20px;
  margin: 20px;
}
</style>